<template>
  <div class="app-container">
    <div class="chart-container">
      <h2>{{ title }}</h2>
      <div id="chart" class="chart" style="height: 500px; width: 100%" />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getBudgetData } from '@/api/budget'
export default {
  data() {
    return {
      title: '',
      yearAndQuarter: '',
      chart: null,
      budgetData: null
    }
  },
  created() {
    this.initCurrQuarter()
    this.showChart()
  },
  methods: {
    showChart() {
      this.initChartData()
      // this.setChart()
    },
    // 准备图表数据
    initChartData() {
      getBudgetData(this.yearAndQuarter).then((response) => {
        this.budgetData = response.data.data
        this.setChart(this.budgetData)
      })
    },
    // 设置图标参数
    setChart(budgetData) {
      // 基于准备好的dom，初始化echarts实例
      setTimeout(function() {
        this.chart = echarts.init(document.getElementById('chart'))
        // 指定图表的配置项和数据
        var option = {
          // 系列列表。每个系列通过 type 决定自己的图表类型
          series: [
            {
              name: '预算统计',
              // 系列中的数据内容数组
              data: budgetData,
              // -------绑定数据
              // 折线图
              type: 'pie',
              label: { // 饼图文字的显示
                show: true, // 显示文字
                formatter: function(arg) {
                  return arg.name + '：' + arg.value + '￥\n' + arg.percent + '%'
                }
              }
            }
          ],
          tooltip: {}
        }
        this.chart.setOption(option)
      }, 1)
    },
    // 获取当前年和季度 例如 2021-3
    initCurrQuarter() {
      const nowDate = new Date()
      const y = nowDate.getFullYear()
      const currMonth = nowDate.getMonth() + 1
      const currQuarter = Math.floor((currMonth % 3 === 0 ? (currMonth / 3) : (currMonth / 3 + 1)))
      this.yearAndQuarter = y + '-' + currQuarter
      this.title = y + '年第' + currQuarter + '季度预算统计情况'
    }
  }
}
</script>
